<template>
    <div>
        <div class='content' style="margin-top: 100px;">
            <el-form :model="form" :rules="rules" ref="form" label-width="100px" class="demo-ruleForm" size="small" inline close-on-click-modal="false">
                <el-form-item label="转移类型" prop="move_type">
                    <el-select v-model="form.move_type" multiple placeholder="请选择">
                        <el-option v-for="(item,index) in options.movelistarr" :key="index" :label="item" :value="index"></el-option>
                    </el-select>
                </el-form-item>
                <div>
                    <el-form-item label="转出人部门" prop="out_d_id">
                        <el-select v-model="form.out_d_id" @change="obtainUser">
                            <!-- <el-option v-for="(item,index) in optionName" :key="index" :label="item.name" :value="item.id"></el-option> -->
                            <el-option-group v-for="group in optionName" :key="group.label" :label="group.label">
                            <el-option v-for="item in group.options" :key="item.value" :label="item.label" :value="item.value">
                            </el-option>
                        </el-option-group>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="转出人" prop="out_uid">
                        <el-select v-model="form.out_uid">
                            <el-option v-for="(item,index) in userType" :key="index" :label="item.u_username" :value="item.u_id"></el-option>
                        </el-select>
                    </el-form-item>
                </div>
                <div>
                    <el-form-item label="转入人部门" prop="to_d_id">
                        <el-select v-model="form.to_d_id" @change="obtainUsers">
                            <!-- <el-option v-for="(item,index) in optionName" :key="index" :label="item.name" :value="item.id"></el-option> -->
                             <el-option-group v-for="group in optionName" :key="group.label" :label="group.label">
                            <el-option v-for="item in group.options" :key="item.value" :label="item.label" :value="item.value">
                            </el-option>
                        </el-option-group>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="转入人" prop="to_uid">
                        <el-select v-model="form.to_uid">
                            <el-option v-for="(item,index) in userTypes" :key="index" :label="item.u_username" :value="item.u_id"></el-option>
                        </el-select>
                    </el-form-item>
                </div>
                <div>
                    <el-form-item label="区县" prop="a_id">
                        <el-select v-model="form.a_id" placeholder="请选择区县" @change="areaChange">
                            <el-option label="全部" value=""></el-option>
                            <el-option v-for="(item,index) in options.area_list" :key="index" :label="item.name" :value="item.code"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="楼盘字典" prop="w_id">
                        <el-select v-model="form.w_id" filterable placeholder="请选择" :filter-method="buildingquerySearchAsync">
                            <el-option v-for="item in buildingOpt" :key="item.w_id" :label="item.w_name" :value="item.w_id"></el-option>
                        </el-select>
                    </el-form-item>
                </div>
                <div>
                <el-form-item label="房源交易" prop="trading_type">
                    <el-select v-model="form.trading_type" placeholder="请选择">
                        <el-option label="全部" value=""></el-option>
                        <el-option v-for="(item,index) in options.r_transaction" :key="index" :label="item.st_name" :value="item.st_id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="房源状态" prop="status">
                    <el-select v-model="form.status" placeholder="请选择">
                        <el-option label="全部" value=""></el-option>
                        <el-option v-for="(item,index) in options.r_status" :key="index" :label="item.st_name" :value="item.st_id"></el-option>
                    </el-select>
                </el-form-item>
                </div>
                <div>
                    <el-form-item label="客源交易" prop="c_trading_type">
                        <el-select v-model="form.c_trading_type" placeholder="请选择">
                            <el-option label="全部" value=""></el-option>
                            <el-option v-for="(item,index) in options.c_transaction" :key="index" :label="item.st_name" :value="item.st_id"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="客源状态" prop="c_buy_status">
                        <el-select v-model="form.c_buy_status" placeholder="请选择">
                            <el-option label="全部" value=""></el-option>
                            <el-option v-for="(item,index) in options.c_status" :key="index" :label="item.st_name" :value="item.st_id"></el-option>
                        </el-select>
                    </el-form-item>
                </div>
                <div>
                    <el-form-item label="委托日从" prop="start_time">
                        <el-date-picker type="date" placeholder="请选择" v-model="form.start_time" value-format="yyyy-MM-dd"></el-date-picker>
                    </el-form-item>_
                    <el-form-item label="" prop="end_time">
                        <el-date-picker type="date" placeholder="请选择" v-model="form.end_time" value-format="yyyy-MM-dd"></el-date-picker>
                    </el-form-item>
                </div>
                <el-form-item label="转移数量" prop="num">
                    <el-input v-model="form.num" type="number" placeholder="请输入" style="padding-right: 15px;"></el-input>（0=不限）
                </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer" style="text-align:center;margin-top: 20px;">
                <el-button @click="cancel('form')" size="mini">取 消</el-button>
                <el-button type="primary" @click="submit('form')" size="mini">开始转移</el-button>
            </div>
        </div>
    </div>
</template>
<style>
    .home .view-content{
        width: 87%;
    }
    .el-form-item__label,.el-form-item__content{
        font-size: 14px;
    }
    .el-input,.el-date-editor.el-input{
        width: 245px;
    }
</style>

<script>
    import conf from '../../../config/userconf.js'
  export default {
    data() {
        return {
            form:{
                move_type: '',
                out_d_id: '',
                out_uid: '',
                to_d_id: '',
                to_uid: '',
                num: '',
                a_id: '',
                w_id: '',
                trading_type: '',
                status: '',
                start_time: '',
                end_time: '',
                c_trading_type: '',
                c_buy_status: '',
            },
            optionName:[],  //部门名称
            userType: [],  //转出人员工
            userTypes: [],  // 转入人员工
            rules:{
                move_type: [
                    { required: true, message: '请选择转移类型', trigger: 'change' }
                ],
                out_d_id: [
                    { required: true, message: '请选择转出人的部门', trigger: 'change' }
                ],
                out_uid: [
                    { required: true, message: '请选择转出人', trigger: 'change' },
                ],
                to_d_id: [
                    { required: true, message: '请选择转入人的部门', trigger: 'change' }
                ],
                to_uid: [
                    { required: true, message: '请选择转入人', trigger: 'change' }
                ],
                num: [
                    { required: true, message: '请输入转移数量', trigger: 'blur' }
                ],

            },
            options: '',  //转移类型下拉
            buildingOpt: [],  //楼盘字典下拉
        }
    },
    methods: {
        /*  员工转房客转出类目数据*/
        ruleoptdata (data=null){
            conf.common.staffoptdata(data,(state,res)=>{
                if (state == 'success'&&res.data.code == 0){
                    console.log(res);
                    this.options = res.data.data;   
                }else if(state == 'success'&&res.data.code != 0){
                    if(res.data.code == 401){
                        this.$router.push({name:'login'});   //登陆态失效，跳转至登录页
                    }else{
                        this.$message({
                            type: 'info',
                            message: res.data.msg
                        });
                    }
                }
            })
        },
        //楼盘字典检索
        buildingquerySearchAsync(queryString,data=Object()){
            if(this.form.a_id == ''){
                this.form.building_id = '';
                this.$message({
                    type: 'info',
                    message: '请先选择区县',
                    duration: 1000
                });
            }else if(queryString != ''){
                data.p_id = this.options.province_code;
                data.c_id = this.options.city_code;
                data.a_id = this.form.a_id;
                data.w_spell = queryString;
                conf.buildingdictionary.search(data,(state,res)=>{
                    if (state == 'success'&&res.data.code == 0){
                        // console.log(res);
                        for(var i=0; i<res.data.data.length; i++){
                            res.data.data[i].w_name = res.data.data[i].value;
                        }

                        this.buildingOpt = res.data.data;
                        
                    }else if (state == 'success'&&res.data.code != 0){

                        if(res.data.code == 401){
                            this.$router.push({name:'login'});   //登陆态失效，跳转至登录页
                        }else{
                            this.$message({
                                type: 'info',
                                message: res.data.msg
                            });
                        }
                    }
                })
            }
            
        },
        //区县change   清空楼盘字典
        areaChange(){
            this.form.w_id = '';
            this.buildingOpt = [];
        },
        /*取消 */
        cancel (formName) {
            this.$refs[formName].resetFields();
        },
        /*提交 */
        submit (formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.judgeprimise();
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        /*判断提交 */
        judgeprimise (data=Object()) {
            this.stringFun(this.form.move_type);
            conf.common.srafftransfertenant(this.form,(state,res)=>{
                if (state == 'success'&&res.data.code == 0){
                    this.$message({
                        type: 'success',
                        message: '转移成功!'
                    });
                    this.strarrFun(this.form.move_type);
                }else if(state == 'success'&&res.data.code != 0){
                    if(res.data.code == 401){
                        this.$router.push({name:'login'});   //登陆态失效，跳转至登录页
                    }else{
                        this.$message({
                            type: 'info',
                            message: res.data.msg
                        });
                    }
                }
            })
        },
        //字符串转换int数组
        intarrFun(val){
            if(typeof(val) == 'string'){
                val = val.split(',');//分割成字符串数组
                var dataIntArrs=[];//保存转换后的整型字符串
                //字符串数组转为整形字符串  
                val.forEach(function(data,index,arr){  
                    dataIntArrs.push(+data);  
                });  
                return dataIntArrs;
            }
            
        },
        //字符串转换int数组 (提交之后   数据处理)
        strarrFun(){
            //转移类型
            if(!Array.isArray(this.form.move_type)){
                this.form.move_type = this.intarrFun(this.form.move_type);
            }
        },
        //数组转换字符串(提交之前  数据处理)
        stringFun(){
            if(Array.isArray(this.form.move_type)){
                var move_types = this.form.move_type;
                this.form.move_type = move_types.join();
            }
        },
        //获取部门
        obtainName(data=Object()){
            conf.department.nameOpt(data,(state,res)=>{
                if (state == 'success'&&res.data.code == 0){
                    this.optionName = res.data.data;
                    // console.log(res); 
                }else if(state == 'success'&&res.data.code != 0){
                    if(res.data.code == 401){
                        this.$router.push({name:'login'});   //登陆态失效，跳转至登录页
                    }else if(res.data.code == -404){
                        this.optionName = [];
                    }else{
                        this.$message({
                            type: 'info',
                            message: res.data.msg
                        });
                    }
                }
            })
        },
        //获取转出人部门员工
        obtainUser(val,data=Object()){
            this.userType = [];
            data.d_id = val;
            conf.department.userOpt(data,(state,res)=>{
                if (state == 'success'&&res.data.code == 0){
                    // console.log(res); 
                    this.userType = res.data.data;
                }else if(state == 'success'&&res.data.code != 0){
                    if(res.data.code == 401){
                        this.$router.push({name:'login'});   //登陆态失效，跳转至登录页
                    }else{
                        this.$message({
                            type: 'info',
                            message: res.data.msg
                        });
                    }
                }
            })
        },
        //获取转入人部门员工
        obtainUsers(val,data=Object()){
            this.userTypes = [];
            data.d_id = val;
            conf.department.userOpt(data,(state,res)=>{
                if (state == 'success'&&res.data.code == 0){
                    // console.log(res); 
                    this.userTypes = res.data.data;
                }else if(state == 'success'&&res.data.code != 0){
                    if(res.data.code == 401){
                        this.$router.push({name:'login'});   //登陆态失效，跳转至登录页
                    }else{
                        this.$message({
                            type: 'info',
                            message: res.data.msg
                        });
                    }
                }
            })
        },
    },
    mounted (){
        this.$nextTick(function(){
            this.ruleoptdata();  //下拉框数据
            this.obtainName();  //部门
        })
    },
        
  }
</script>